<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      position: relative;
      margin: 0;
      padding: 0;
    }
    .head {
      width: 314px;
      height: 290px;
      margin: 20px auto 0;
      background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
      border: 2px solid #333;
      border-radius: 50%;
    }
    .head::before {
      content: '';
      position: absolute;
      top: 66px;
      left: 32px;
      width: 250px;
      height: 200px;
      background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
      border-radius: 50%;
    }
    .lefteye,
    .righteye {
      position: absolute;
      top: 40px;
      width: 69px;
      height: 80px;
      background-color: #fff;
      border: 2px solid #333;
      border-radius: 34px;
      z-index: 2;
    }
    .lefteye {
      left: 85px;
    }
    .righteye {
      right: 85px;
    }
    .lefteye::before,
    .righteye::before {
      content: '';
      position: absolute;
      top: 40px;
      width: 15px;
      height: 15px;
      background-color: #000;
      border-radius: 50%;
      animation: eyesmove 3s linear infinite;
    }
    .lefteye::before {
      right: 10px;
    }
    .righteye::before {
      left: 10px;
    }
    .righteye::after {
      content: '';
      position: absolute;
      top: 83px;
      left: 5px;
      width: 2px;
      height: 2px;
      background-color: #fff;
      box-shadow: 0 0 6px 5px #fff;
      border-radius: 50%;
    }
    .nose {
      content: '';
      position: absolute;
      top: 112px;
      left: 142px;
      width: 26px;
      height: 26px;
      background-color: #c93300;
      border: 2px solid #333;
      border-radius: 12px;
    }
    .nose::before {
      content: '';
      position: absolute;
      top: 27px;
      left: 12px;
      width: 3px;
      height: 90px;
      background-color: #333;
    }
    .nose::after {
      content: '';
      position: absolute;
      top: -85px;
      left: -98px;
      width: 220px;
      height: 200px;
      border: 2px solid transparent;
      border-bottom-color: #333;
      border-radius: 0 0 110px 110px;
    }
    .leftbeard,
    .rightbeard {
      position: absolute;
      top: 167px;
      width: 65px;
      height: 2px;
      background-color: #333;
    }
    .leftbeard {
      left: 55px;
    }
    .rightbeard {
      right: 55px;
    }
    .leftbeard::before,
    .leftbeard::after,
    .rightbeard::before,
    .rightbeard::after {
      content: '';
      position: absolute;
      width: 65px;
      height: 2px;
      background-color: #333;
    }
    .leftbeard::before {
      top: -20px;
      left: 3px;
      transform: rotate(20deg);
    }
    .leftbeard::after {
      top: 20px;
      left: 3px;
      transform: rotate(-20deg);
    }
    .rightbeard::before {
      top: -20px;
      right: 3px;
      transform: rotate(-20deg);
    }
    .rightbeard::after {
      top: 20px;
      right: 3px;
      transform: rotate(20deg);
    }
    .body {
      width: 500px;
      margin: -30px auto;
    }
    .tummy {
      position: absolute;
      left: 135px;
      width: 230px;
      height: 190px;
      background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
    }
    .tummy::before{
      content: '';
      position: absolute;
      top: 8px;
      left: -50px;
      width: 110px;
      height: 50px;
      background-color: #0096be;
      border: 1px solid #333;
      transform: rotate(-25deg);
      z-index: -2;
    }
    .tummy::after {
      content: '';
      position: absolute;
      top: 8px;
      right: -50px;
      width: 110px;
      height: 50px;
      background-color: #07beea;
      border: 1px solid #333;
      transform: rotate(20deg);
      z-index: -2;
    }
    .line {
      position: absolute;
      top: 50px;
      left: 135px;
      width: 226px;
      height: 140px;
      margin: auto;
      border-left: 2px solid #333;
      border-right: 2px solid #333;
    }
    .line::before,
    .line::after {
      content: '';
      position: absolute;
      top: -25px;
      width: 60px;
      height: 60px;
      background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
      border: 2px solid #333;
      border-radius: 30px;
    }
    .line::before {
      left: -80px;
    }
    .line::after {
      right: -80px;
    }
    .brand {
      position: absolute;
      top: -5px;
      left: 134px;
      width: 228px;
      height: 20px;
      background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
      border: 2px solid #333;
      border-radius: 10px;
      z-index: 2;
    }
    .brand::before {
      content: '';
      position: absolute;
      top: 22px;
      left: 55px;
      width: 120px;
      height: 50px;
      background-color: #fff;
    }
    .brand::after {
      content: '';
      position: absolute;
      top: 72px;
      left: 55px;
      width: 120px;
      height: 60px;
      background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
      border: 2px solid #333;
      border-radius: 0 0 60px 60px;
      box-sizing: border-box;
    }
    .bell {
      position: absolute;
      left: 229px;
      width: 38px;
      height: 38px;
      background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
      border: 2px solid #333;
      border-radius: 50%;
      z-index: 3;
    }
    .bell::before {
      content: '';
      position: absolute;
      top: 18px;
      left: 13px;
      width: 12px;
      height: 11px;
      background-color: #333;
      border-radius: 50%;
    }
    .bell::after {
      content: '';
      position: absolute;
      top: 29px;
      left: 17px;
      width: 4px;
      height: 10px;
      background-color: #333;
    }
    .leftfoot,
    .rightfoot {
      position: absolute;
      top: 185px;
      width: 125px;
      height: 30px;
      background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
      border: 2px solid #333;
      border-radius: 30px 20px 20px 10px;
    }
    .leftfoot {
      left: 115px;
    }
    .rightfoot {
      right: 120px;
    }
    .rightfoot::before {
      content: '';
      position: absolute;
      top: -9px;
      left: -15px;
      width: 21px;
      height: 10px;
      background-color: #fff;
      border: 2px solid #333;
      border-bottom: transparent;
      border-radius: 20px 20px 0 0;
    }
    @keyframes eyesmove {
      30% {
        margin-top: -10px;
      }
      60% {
        margin-top: -20px;
      }
    }
  </style>
</head>
<body>
  <div class="head">
    <div class="lefteye"></div>
    <div class="righteye"></div>
    <div class="nose"></div>
    <div class="leftbeard"></div>
    <div class="rightbeard"></div>
    <div class="mouth"></div>
  </div>
  <div class="body">
    <div class="tummy"></div>
    <div class="line"></div>
    <div class="brand"></div>
    <div class="bell"></div>
    <div class="leftfoot"></div>
    <div class="rightfoot"></div>
  </div>
</body>
</html>